<!-- 仓库查询选择页面组件 -->
<template>
    <view class="selectpoput">

        <view class="selectpoput-view">
            <view class="selectpoput-title">
                <!-- 选择输入框 -->
                <view class="function-input1">

                    <!-- 做标题 -->
                    <view class="function-right-title-box">
                        <view class="function-right-title function-right-title1 "><text
                                style="font-size: 20px;margin-left: 4px; width: auto; "> {{ selecttitle }}</text></view>
                    </view>
                    <!-- 输入框 -->
                    <view class="function-input1-box" >
                        <input class="ipt" v-model="input" />
                    </view>
                    <!-- 搜索按钮 -->
                    <view class="function-input1-buttonview">
                        <view class="function-input1-button  function-input1-button1"><text
                                style="font-size: 20px;margin-left: 4px; ">{{ buttontext1 }}</text></view>
                    </view>
                </view>
            </view>

            <!-- 详细内容 -->
            <view class="detailed">
                <view class="detailed-smas">
                    <view class="detailed-smas-title">
                        <view class="detailed-smas-title1 smas-title1 "><text>{{ selecLeftttitle1 }}</text></view>
                        <view class="detailed-smas-title1 smas-title1 "><text>{{ selecRightttitle1 }}</text></view>
                    </view>
                    <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 200px;">
                        <view class="detailed-smas-title  title-active" v-for="item in dataList"
                            @click="clickdlest(item)">
                            <view class="detailed-smas-title1 smas-title2"><text>{{ item.code }}</text></view>
                            <view class="detailed-smas-title1  smas-title2"><text>{{ item.name }}</text></view>
                        </view>
                        <view style="display: flex;justify-content: center;">
                            <text style="font-size: 10px;color: darkgrey;">数据已经显示完毕</text>

                        </view>
                    </scroll-view>

                </view>
            </view>
        </view>

    </view>
</template>

<script setup lang="ts">
import { ref, onUnmounted, watch, onMounted } from "vue"

// 在组件挂载时执行请求
onMounted(() => {
    first();
});
// 第二步：编写销毁时执行的清理函数
onUnmounted(() => {
    // # 组件销毁时执行的代码
    //   clearInterval(timer);  // # 清理定时器（必须做！）
    console.log('组件已销毁，资源已清理');
});
import SelectAPI from '@/api/SelectAPI'

// 三合一传进来的参数
const props = defineProps({
    propsselecttitle: {
        type: String,
        default: ''

        // validator: (value: string) => {
        //     // 验证参数值是否有效
        //     // 验证传入的 selecttitle 值是否为 'warehouse'、'house' 或 'location' 之一，是则返回 true，否则返回 false
        //     return ;
        // }
    },
    code: {
        type: String,
        default: ''
    }

})
// 返回的事件
const emit = defineEmits(['propspuop', 'update:code'])


// 组件内部状态
const loading = ref(false); // 加载状态
const dataList = ref<any[]>([]); // 数据列表
const error = ref(''); // 错误信息


//第一查询行
//左边标题
let selecttitle = ref<string>("")
//输入框
let input = ref<string>(props.code)
// 新增：监听输入框变化，通知父组件
watch(input, (newValue) => {
    emit('update:code', newValue);
});
// // 新增：监听父组件code变化，同步到子组件
// watch(() => props.code, (newValue) => {
//   if (newValue !== input.value) {
//     input.value = newValue;
//   }
// });

// 右边按钮
let buttontext1 = ref<string>("查询")
//查询内容左边标题
let selecLeftttitle1 = ref<string>("仓库编号")
//查询内容右边输入框
let selecRightttitle1 = ref<string>("仓库名称")

type item = {
    name: string,
    code: string
}
// 点击列表项时触发
const clickdlest = (item: item) => {
    input.value = item.code // 更新v-model:code绑定的值
    // 通过update:code事件通知父组件
    emit('update:code', item.code);
    emit('propspuop', {
        code: item.code,
        popup: false
    })


}

//进来先进入的逻辑方法
const first = () => {
    input.value = props.code;


    selecttitle.value = props.propsselecttitle;
    if (selecttitle.value == '仓库') {
        selecLeftttitle1.value = '仓库编号'
        selecRightttitle1.value = '仓库名称'
        executeRequest('warehouse')
    } else if (selecttitle.value == '仓位') {
        selecLeftttitle1.value = '仓位编号'
        selecRightttitle1.value = '仓位名称'
        executeRequest('location')

    }else if (selecttitle.value == '物料查询') {
        selecLeftttitle1.value = '物料编号'
        selecRightttitle1.value = '物料名称'
        executeRequest('location')

    }else if (selecttitle.value == '开单人') {
        selecLeftttitle1.value = '开单人编号'
        selecRightttitle1.value = '开单人名称'
        executeRequest('location')

    }
    else if (selecttitle.value == '入库类型') {
        selecLeftttitle1.value = '入库类型编号'
        selecRightttitle1.value = '入库类型名称'
        executeRequest('location')

    }
     else if (selecttitle.value == '供应商') {
        selecLeftttitle1.value = '供应商编号'
        selecRightttitle1.value = '供应商名称'
        executeRequest('location')

    }
     else if (selecttitle.value == '客户') {
        selecLeftttitle1.value = '客户编号'
        selecRightttitle1.value = '客户名称'
        executeRequest('location')

    }
    else if (selecttitle.value == '部门') {
        selecLeftttitle1.value = '部门编号'
        selecRightttitle1.value = '部门名称'
        executeRequest('location')

    }
    else if (selecttitle.value == '备注') {
        selecLeftttitle1.value = '备注编号'
        selecRightttitle1.value = '备注名称'
        executeRequest('location')

    }
}



// 执行请求的方法
const executeRequest = async (methodName: string) => {
    loading.value = true; // 显示加载进度
    error.value = ''; // 清空错误信息

    try {

        // 检查方法是否存在，避免调用不存在的方法
        if (!(methodName in SelectAPI)) {
            throw new Error(`方法 ${methodName} 在SelectAPI中不存在`);
        }
        // 执行请求并传递参数
        const result = await (SelectAPI as { [key: string]: (username: string, password: string) => Promise<unknown> })[methodName]("fsfs", "fwew").then((res) => {
            // 定义响应数据类型
            type ResponseData = {
                data: {
                    data: {
                        list: any[];
                    };
                };
            };
            console.log((res as ResponseData).data.data.list);
            // 处理请求结果
            dataList.value = (res as ResponseData).data.data.list || [];
            console.log('请求成功', dataList.value);
        })

    } catch (err) {
        console.error('请求失败', err);
        error.value = '请求失败，请稍后重试';
        loading.value = false; // 隐藏加载进度
    };
}

</script>

<style scoped>
.selectpoput-view {
    width: 100%;
    height: 100%;
}

.function-input1 {
    padding: 20px 10px;
    display: flex;
    height: 45px;
    background-color: rgb(242, 245, 245);
    border-radius: 20px 20px 20px 20px;
    margin-bottom: 30px;
    justify-content: center;
}




.function-right-title-box {
    height: 40px;
    margin-left: 10px;
    flex: 0 0 auto; /* 防止容器被压缩 */

}


.function-input1-box {
    height: 40px;
}
.function-right-title {
 white-space: nowrap; /* 防止文字换行 */
    width: 50px;
    height: 40px;
    margin-right: 10px;

}

.function-right-title1 {
    width: auto;
    font-size: 16px;
    line-height: 38px;

}



.function-input1-buttonview {
    width: 60px;
    height: 40px;
    margin-left: 10px;

}

.function-input1-button {
    width: 50px;
    height: 40px;
    background-color: #F7F3F1;
    border-radius: 10px;
    background-color: dodgerblue;
    line-height: 30px;
    color: #FFFFFF;
}

.function-input1-button1 {
    font-size: 16px;
    line-height: 38px;

}

.detailed {
    width: 100%;
    /* background-color: dodgerblue; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.detailed-smas {
    width: 90%;
    /* height: 200px; */
    background-color: #f5f4f4;
    padding: 10px 10px;
    border-radius: 10px;
}

.detailed-smas-title {
    display: flex;

}

.title-active {
    &:active {
        background-color: #f1f1f2;
        transition: background-color 0.0001s;
        /* 添加过渡效果，设置过渡时间为 0.1 秒，减少按下显示时间 */
    }

    /* 按下时变深，类似按钮被按扁 */
}

.smas-title1 {
    font-size: 20px;
}

.smas-title2 {
    font-size: 18px;
    padding: 6px 0px;
}

.detailed-smas-title1 {
    width: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ipt {
    /* 原代码保持不变 */
    height: 40px;
    font-size: 18px;

    /* 新增边框样式 - 三要素缺一不可 */
    border: 2px solid #545654;
    /* # 边框厚度:2像素 | 样式:实线 | 颜色:蓝色 */
    border-radius: 20px;
    /* # 圆角半径:8像素 */
    padding: 0px 10px;
    transition: border-color 0.3s;
    /* # 添加过渡动画，使颜色变化更平滑 */
}
</style>
